  <div class="row">
    <div class="col-xs-12 col-sm-8">
      <h4>
        <strong>BTC / {{ activeCurrency.displayname }} {{ 'EXCHANGE.TRADE.ACTIVE' | translate}}</strong>
        <small ng-hide="orderbook.length == 0" class="text-muted">({{orderbook.length}} {{'EXCHANGE.TRADE.TOTAL' | translate}})</small>
      </h4>
    </div>
    <div class="col-xs-12 col-sm-3 text-right form-inline" style="float:right">
      {{'EXCHANGE.TRADE.TIMEFRAME' | translate}}: <select class="form-control" ng-model="selectedTimeframe"  
          ng-change="getData(selectedTimeframe, currency)" ng-options="time.value as time.name for time in timeOptions">
      </select>
    </div>
  </div>
  <div class="row">
    <div ng-show="loading" class="col-xs-12 text-center">{{'COMMON.LOADING' | translate}}...<img src="/assets/img/spinner.gif"></div>
  </div>
  <div class="col-sm-12 om-table" ng-hide="loading">
    <div class="row table-header hidden-xs">
      <div class="col-sm-2">{{ 'EXCHANGE.TRADE.PRICE' | translate}}</div>
      <div class="col-sm-2">{{ 'EXCHANGE.TRADE.AMOUNT' | translate}}</div>
      <div class="col-sm-1">{{ 'EXCHANGE.TRADE.COST' | translate}}</div>
      <div class="col-sm-1">{{ 'EXCHANGE.TRADE.FEESHORT' | translate}}
        <a href=""
          tooltip="{{ 'EXCHANGE.TRADE.FEEDESC' | translate }}"
          tooltip-append-to-body="true"
          tooltip-placement="top"> <strong>(?)</strong>
        </a>
      </div>
      <div class="col-sm-1">{{ 'EXCHANGE.TRADE.PAYMENT' | translate}}</div>
      <div class="col-sm-2">{{ 'EXCHANGE.BUY.SELLER' | translate}}</div>
      <div class="col-sm-1">&nbsp;</div>
    </div>

    <div class="row table-row text-center" ng-show="!loading && noOrders">
      <h3>{{ 'EXCHANGE.TRADE.NOORDERS' | translate }}</h3>
    </div>

    <div ng-repeat="transaction in orderbook" ng-hide="({{transaction.color=='bgc-expired'}} || {{transaction.color=='bgc-done'}} || {{transaction.formatted_amount_available * transaction.formatted_price_per_coin < .00000557}}) && inactive" class="row table-row check-element animate-hide">
      <div class="visible-xs col-xs-7">{{ 'EXCHANGE.TRADE.PRICE' | translate}}</div>
      <div class="number col-xs-5 col-sm-2" title="{{transaction.formatted_price_per_coin}}" ng-bind-html="transaction.formatted_price_per_coin | bigjs: '0,0.00000000'"></div>
      <div class="visible-xs col-xs-7">{{ 'EXCHANGE.TRADE.AMOUNT' | translate}}</div>
      <div class="number col-xs-5 col-sm-2" ng-show="{{transaction.color == 'bgc-new'}}" title="{{transaction.formatted_amount_available}}" ng-bind-html="transaction.formatted_amount_available | bigjs: '0,0.00000000'"></div> 
      <div class="number col-xs-5 col-sm-2" ng-show="{{transaction.color == 'bgc-new-accepted'}}" title="{{transaction.formatted_amount_available}}" ng-bind-html="transaction.formatted_amount_available | bigjs: '0,0.00000000'"></div> 
      <div class="number col-xs-5 col-sm-2" ng-show="{{transaction.color == 'bgc-accepted-done'}}" title="{{transaction.formatted_amount_available}}" ng-bind-html="transaction.formatted_amount_available | bigjs: '0,0.00000000'"></div> 
      <div class="col-xs-5 col-sm-1" ng-show="{{transaction.color == 'bgc-expired'}}">{{ 'EXCHANGE.TRADE.ENDED' | translate}}</div>
      <div class="col-xs-5 col-sm-1" ng-show="{{transaction.color == 'bgc-done'}}">{{ 'EXCHANGE.TRADE.SOLD' | translate}}</div>
      <div class="visible-xs col-xs-7">{{ 'EXCHANGE.TRADE.COST' | translate}}</div>
      <div class="col-xs-5 col-sm-1" class="number" title="{{transaction.formatted_amount_available * transaction.formatted_price_per_coin}}" ng-bind-html="transaction.formatted_amount_available*transaction.formatted_price_per_coin | bigjs: '0,0.00000000'"></div>
      <div class="visible-xs col-xs-7">{{ 'EXCHANGE.TRADE.FEESHORT' | translate}}<a href=""
                tooltip="{{ 'EXCHANGE.TRADE.FEEDESC' | translate }}"
                tooltip-append-to-body="true"
                tooltip-placement="top"> <strong>(?)</strong> </a>
      </div>
      <div class="col-xs-5 col-sm-1" class="number" title="{{transaction.formatted_fee_required}}" ng-bind-html="transaction.formatted_fee_required | bigjs: '0,0.00000000'"></div>
      <div class="visible-xs col-xs-7">{{ 'EXCHANGE.TRADE.PAYMENT' | translate}}</div>
      <div class="col-xs-5 col-sm-1" class="number" title="{{transaction.formatted_block_time_limit}}" ng-bind-html="transaction.formatted_block_time_limit | bigjs: '0,0'"></div>

      <div class="visible-xs col-xs-7">{{ 'EXCHANGE.BUY.SELLER' | translate}}</div>
      <div class="col-xs-5 col-sm-2">
        <a href="https://www.omniexplorer.info/tx/{{transaction.tx_hash}}" target="_blank">{{transaction.from_address}}</a><span ng-show="transaction.mine">* {{ 'EXCHANGE.TRADE.YOURS' | translate}}</span>
      </div>

      <div class="col-xs-12 col-sm-3 text-right" ng-show="account.loggedIn && (transaction.tx_hash.length == 64)">
        <button class="btn btn-secondary btn-sm" ng-hide="{{transaction.color=='bgc-expired'}} || {{transaction.color=='bgc-done'}} || {{transaction.formatted_amount_available * transaction.formatted_price_per_coin < .00005757}}" ng-click="setView('buyOffer', transaction)" type="submit">{{ 'EXCHANGE.TRADE.ACCEPT' | translate}}</button>   
        <button class="btn btn-secondary btn-sm" ng-show="({{transaction.color == 'bgc-new'}} || {{transaction.color == 'bgc-new-accepted'}} || {{transaction.color == 'bgc-accepted-done'}}) && {{transaction.formatted_amount_available * transaction.formatted_price_per_coin < .00005757}}" onclick="alert('We are sorry. The purchase price for the remaining amount falls below the network minimum and cannot be completed. Please choose a different offer.')" type="submit">{{ 'EXCHANGE.TRADE.ACCEPT' | translate}}</button>
      </div>
    </div>
  </div>
